<template>
<div class="box">
    <div class="login">
        <form action="" method="post" id="form">
            <div class="logo"></div>
            <div class="login_form">
                <div class="user">
                    <input class="text_value" value="" name="username" type="text" id="username" v-model="username">
                    <input class="text_value" value="" name="password" type="password" id="password" v-model="password">
                </div>
                <button class="button" type="button" @click="login()">登录</button>
            </div>
            
            <div id="tip"></div>
            <div class="foot">
                Copyright © Code by g20 
            </div>
        </form>
    </div>
</div>
</template>

<script>
    import {setToken} from '@/utils/auth.js' ;

    export default {
        data() {
            return {
                username : "" ,
                password : ""
            }
        },
        methods : {
            login : function(){
                if(this.username == 'admin' && this.password == '778899'){
                    console.log("登录");
                    setToken("778899");
                    this.$router.push('/').catch(err => { console.log(err) })
                }
            }
        }
    }
</script>

<style scoped>


html, body , .box { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: 'microsoft yahei'; background-image:url(../assets/login/login_bg.jpg); }
html { _height: auto; _padding: 50px 0 0px; }
.login { width:640px; height:400px; position:absolute; left:50%; top:50%; margin-left:-320px; margin-top:-200px;}
.logo { background-image:url(../assets/login/admin_logo.png); background-repeat:no-repeat; background-position: 30px center; height:150px;}
.login_form { height:80px; margin-left:auto; margin-right:auto; width:600px;}
.login_form .user{ background-image:url(../assets/login/login_name_bg.jpg); width:540px; height:80px; float:left;}
.login_form .button { background:url(../assets/login/login_button.jpg); width:50px; background-repeat:no-repeat; background-position:left center; height:54px; float:left; display:block; text-indent: -9999px; border:none; margin-top:10px; position:relative}
.login_form .text_value { float:left; margin-left:17px; padding-left:10px; padding-right:10px; margin-top:15px; width:225px; height:50px; line-height:50px; font-size:16px; color:#666; font-weight:bold; border:none; background-color:#f5f6f7}
.foot { padding-top:30px; text-align:center; color:#FFF; padding-right:80px;}
#tip { padding-top:10px; color:#FFF;   background-image:none; text-align:center; padding-right:80px; font-size:14px;}
</style>